<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>举报管理</title>
    <link rel="stylesheet" href="/leek_bbs/statics/yu-ui/js_css/yu.css">
    <link rel="stylesheet" href="/leek_bbs/statics/layui/css/layui.css">
    <style>

        a { color:blue; transition:0.5s; }
        a:hover { color:red; }
        .layui-layout-admin .layui-footer{
            left: 0px;
            width: 98%;
        }
        .bgSign{
            text-align: center;
            color: #fff;
            background-color: #009688;
        }
        .layui-col-sm4{
            padding: 10px;
            cursor: pointer;
        }
        .layui-tab{
            margin: 4px 0;
        }
        #lay-posts-report > .layui-row{
            margin: 8px 6px;
        }
    </style>

</head>
<body style="background-color: #F2F2F2">

<div class="layui-layout layui-layout-admin" id="hmc">

    <div style="background-color: #FFFFFF">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true" >
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form">
                        <div class="layui-form-item marg" style="margin-left: 42px">
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" id="start_time" name="start_time" placeholder="开始时间..." autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" id="end_time" name="end_time" placeholder="结束时间..." autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <!--<input type="text" id="plate_name" name="plate_name" placeholder="帖子所在板块..." autocomplete="off" class="layui-input">-->
                                    <select name="r_status" lay-verify="" id="r_status">
                                        <option value="" selected>请选择一个处理状态</option>
                                        <option value="0">待处理</option>
                                        <option value="1">已处理</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <!--<input type="text" id="plate_name" name="plate_name" placeholder="帖子所在板块..." autocomplete="off" class="layui-input">-->
                                    <select name="rp_type" lay-verify="" id="rp_type">
                                        <option value="1" selected>主题</option>
                                        <option value="2">帖子</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline"><!--data-type="search"-->
                                    <button type="button"  lay-submit lay-filter="searchBtn" class="layui-btn layui-btn-warm layui-icon layui-icon-search">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <table class="layui-hide" id="postsReportTable" lay-filter="test"></table>

                    <!-- 自定义头部按钮 -->
                    <div style="display: none;" id="cellphoneToo">
                        <div class="layui-btn-group">
                            <!--<button type="button" style="background-color: rgb(188, 23, 32);" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDispose"><i class="layui-icon">&#xe642;</i>批量处理</button>-->
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon">&#xe640;</i>批量删除</button>
                        </div>
                    </div>

                    <!-- 自定义右侧操作按钮 -->
                    <div id="cellphoneBar" >
                        <!--<a class="layui-btn layui-btn-xs" style="background-color: rgb(188, 23, 32);" lay-event="removal">迁移</a>-->
                        <!--<a style="margin-left: 2px;" class="layui-btn layui-btn-xs" style="background-color: rgb(188, 23, 32);" lay-event="dispose">处理</a>-->
                        <a style="margin-left: 2px;" class="layui-btn layui-btn-xs" lay-event="dispose">查看并处理</a>
                        <a style="margin-left: 2px;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div align="center">
            © 凛冬 - 版权所有
        </div>
    </div>
</div>
<script src="/leek_bbs/statics/component/common_import.js"></script>
<script>
    let tableLoad;

    layui.use(['table','form','layer','laydate','util'], function() {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer,
            util = layui.util,
            laydate = layui.laydate;

        //日期范围
        laydate.render({
            elem: '#start_time'
            , theme: '#393D49'
        });
        laydate.render({
            elem: '#end_time'
            , theme: '#393D49'
        });

        form.on('submit(searchBtn)', function (data) {
            search(data.field);
        });

        //表格数据渲染必须函数
        tableLoad = table.render({
            elem: '#postsReportTable'	//表格操作对象
            , url: '/leek_bbs/stair/postReportManage/listRecords'	//数据接口
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , toolbar: '#cellphoneToo'	//自定义表格上面左侧按钮
            , method: 'post'
            , contentType: 'application/json'
            , defaultToolbar: ['filter', 'exports',]
            , height: 540     //固定表格高度,当每页要显示的条数大于10条时,让它出现下拉框
            , cellMinWidth: 100	//设置列的最小默认宽度,拉伸时最小能缩小的宽度
            , request: {
                pageName: 'pageNo' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,where: {
                rp_type:1
            }
            , done: function (res, curr, count) {
                //console.log(res);
            }
            //,totalRow:true	//开启合并行,进行计算
            , text: {
                none: '暂无相关数据'//默认:无数据
            }
            , page: true
            //,limit:20	//设置每页显示的条数,默认显示为10条
            , limits: [10, 20, 30, 40]	//每页显示条数选择下拉框
            , title: '举报信息数据表'	//数据导出标题
            , cols: [[
                {type: 'checkbox', fixed: 'left'}	//复选框,多选
                , {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}//sort:已请求数据排序开启
                , {field: 'username', title: '举报者',width:'13%'}
                , {field: 'r_type', title: '举报类型',width:'12%'}
                , {field: 'r_content', title: '举报内容描述',width:'22%'}
                , {field: 'rp_type', title: '举报类型',width:'10%',templet:function (d) {
                        return d.rp_type=='1'?'主题':'帖子'
                    }}
                , {field: 'r_time', title: '举报时间',width: '18%',
                    templet: function (d) {
                        return util.toDateString(d.r_time, 'yyyy-MM-dd HH:mm:ss')
                    }}
                , {field: 'r_status', title: '处理状态',width:'10%',templet:function (d) {
                        let str;
                        if (d.r_status=='0') {
                            //str = `<button class="layui-btn layui-btn-primary" style="background-color: rgb(188, 23, 32);">待处理</button>`;
                            str = `<span style="font-weight:bold;color:  rgb(188, 23, 32);">待处理</span>`
                        }else{
                            str = `<span style="font-weight:bold;color:  #009688;">已处理</span>`
                            //str = `<button class="layui-btn">已处理</button>`;
                        }
                        return str
                    }}
                , {fixed: 'right', title: '操作', width: '15%', toolbar: '#cellphoneBar'}	//toolbar可使用默认提供按钮,也可自定义按钮
            ]]
            //,id: 'activeReload'     //重载标识

        });


        function search(map) {
            //执行重载
            table.reload('postsReportTable', {
                url: '/leek_bbs/stair/postReportManage/listRecords'
                , methods: "post"
                , request: {
                    page: 'pageNo' //页码的参数名称，默认：page
                    , limit: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: map   //可以传对象
            }, 'data');
        }

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;    //表格选中的数据
            let ids = new Array(data.length);
            for (let i in data) {
                let id = data[i].id;
                ids[i] = id;
            }
            //console.log(obj.config);
            switch (obj.event) {
                case 'batchDelete':
                    //layer.msg('选中了：'+ data.length + ' 个');
                    if (data.length > 0) {
                        ui.confirm('确定删除吗?', function (z) {
                            if (z) {
                                deletePostsDetails(ids);
                            }
                        });
                    } else {
                        ui.alert("请选择您要删除的数据", 1500, false);
                    }

                    break;
                case 'batchDispose':        //批量处理
                    if (data.length > 0) {

                    } else {
                        ui.alert("请选择您要处理的举报数据", 1500, false);
                    }
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            let ids = [];
            if (obj.event === 'del') {
                ui.confirm('确定删除这条数据吗', function (z) {
                    ids[0] = data.id;
                    if (z) {
                        deletePostsDetails(ids);
                    }
                });
            }else {     //查看并处理被举报的主题或帖子
                if (data.r_status != '1') {
                    openContent(data);
                }else {
                    ui.alert("您已经处理过该举报数据了,不要再重复处理!",1500,false);
                }
            }

        });

        //监听举报处理提交
        form.on('submit(warnForm)', function (data) {
            console.log(data);
            disposePostsReport(data.field);
            return false;
        });
        //监听举报下拉框选择
        form.on('select(warnSelect)', function (data) {
            if(data.value == 1){
                $("#lay-text").val("内容描述属实,举报通过！");
            }else if (data.value == 2){
                $("#lay-text").val("内容描述不属实,举报不通过！");
            }
            return false;
        });

        //批量删除数据或删除单行数据
        function deletePostsDetails(ids) {
            axios.post('/leek_bbs/stair/postReportManage/deletePostReport', ids).then((res) => {
                let data = res.data;
                if (data.code == "500020") {
                    ui.success("删除成功", 1500, false);
                    tableLoad.reload();
                } else if (data.code == "500037") {
                    layer.msg(data.msg);
                } else {
                    ui.alert(data.msg, 1500, false);
                }
            }).catch(function (error) {
                ui.alert("请求异常", 1500, false);
                console.log(error);
            });

        }

        //处理举报数据
        function disposePostsReport(params) {
            axios.post('/leek_bbs/stair/postReportManage/disposePostReport',params).then(response => {
                let data = response.data;
                if (data.code == "500020") {
                    layer.closeAll();
                    ui.success("举报处理成功",2000,false);
                    tableLoad.reload();
                }else if (data.code == "500037"){
                    layer.msg(data.msg);
                }else {
                    layer.alert(data.msg);
                }
            }).catch(error => {
                ui.error("请求异常",1500,false);
            })
        }

        //举报处理
        function openContent(data) {
            //console.log(data);
            layer.open({
                type:1,
                title:false,
                content:`<div class="layui-fluid">
                            <div id="lay-posts-report">
                                <div class="layui-row" style="margin: 20px 6px;"><span>${data.rp_type==1?'主题':'帖子'}&nbsp;(类型:&nbsp;${data.r_type})</span></div>
                                <div class="layui-row" style="margin: 20px 6px 24px;font-size: 18px;">
                                    <span>举报者:&emsp;</span><b>${data.username}&emsp;</b>
                                    <span>举报时间:&emsp;</span><span style="font-size: 16px;opacity: .6;">${util.toDateString(data.r_time, 'yyyy-MM-dd HH:mm')}</span>
                                </div>
                                <div class="layui-row" style="margin: 10px 6px;"><span>举报内容描述:</span></div>
                                <div class="layui-row" style="margin: 10px 30px;"><span style="font-size: 18px;color: red;">${data.r_content}</span></div>
                                <div class="layui-row" style="margin: 8px 6px;"><span>帖子内容:</span></div>
                            </div>
                        <h3 style="margin: 8px 6px;">举报处理</h3>
                        <div class="layui-row">
                            <form class="layui-form">
                                <input type="hidden" name="id" value="${data.id}">
                                <input type="hidden" name="pid" value="${data.pid}">
                                <input type="hidden" name="uid" value="${data.uid}">
                                <input type="hidden" name="rp_type" value="${data.rp_type}">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block" style="width: 50%">
                                      <input type="text" name="title"  lay-verify="required" value="举报结果" autocomplete="off" class="layui-input" disabled>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">处理结果</label>
                                    <div class="layui-input-block" style="width: 45%">
                                      <select name="digit" lay-verify="required" lay-filter="warnSelect">
                                        <option value="" selected>请选者一个处理状态</option>
                                        <option value="1">通过</option>
                                        <option value="2">不通过</option>
                                      </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">内容</label>
                                    <div class="layui-input-block" style="width: 50%">
                                      <textarea name="content" id="lay-text" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                      <button class="layui-btn" lay-submit lay-filter="warnForm">立即提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        </div>`
                ,resize:false
                ,scrollbar: false
                ,area:["98%","98%"]
                ,success: function(layero, index){
                    let str;
                    if (data.post != null) {
                        str = `<div class="layui-row"><blockquote class="layui-elem-quote">${data.post.content}</blockquote></div>`;
                    }else{
                        str = `<div class="layui-row" style="margin-top: 15px;"><blockquote class="layui-elem-quote">${data.postDetails.pd_content}</blockquote></div>`;
                    }
                    $("#lay-posts-report").append(str);
                    form.render();
                }
            });
        }


    });


</script>

</body>
</html>